<template>
<div class="columnpart_all_box">
   <div class="columnpart_box" v-for="(v,i) in this.$store.state.systemM.arrList" :key="i">
      <div class="columnpart_box_left"> 
          <img :src=v.cover>
      </div>
      <div class="columnpart_box_right">
          <p class="title">{{v.gname}}</p>
          <div class="class_hour">
              <span>{{v.desc|omit}}</span>
          </div>
          <div class="lecturer">
              <!-- 三目运算初始化tname -->
              <span>{{v.teacher!=null?v.teacher.tname:''}}</span>
          </div>
          <p class="pirse"><span>{{"￥"+v.price}}</span> <span class="read_num">{{v.stu_num}}</span>  <span>人订阅</span>  <span>试读</span> </p>
      </div>
      
  </div>     
</div>
  
</template>

<script>
export default {
    
}
</script>

<style scoped>
.columnpart_all_box{
     width:100%;
     display: flex;
     flex-wrap: wrap;
}
.columnpart_box{
    width:3.43rem ;
    height: 1.51rem;
    /* background-color: #f3f3f3; */
    margin: 0 auto;
    display: flex;
}
.columnpart_box_left{
    width: 0.87rem;
    height: 1.18rem;
}
img{
    width: 100%;
    height: 100%;
}
.columnpart_box_right{
    flex: 1;
    position: relative;
}
.title{
    width: 100%;
    height: 0.24rem;
    font-size: 0.14rem;
    color: black;
    font-weight:bold;
    text-align: left;
    text-indent:0.16rem;
}
.class_hour{
    width: 2.40rem;
    height: 0.27rem;
    background-color: #f8f7f7;
    font-size: 0.12rem;
    color: #1c1e21;
    text-indent: 0.08rem;
    line-height: 0.27rem;
    border-top-left-radius: 0.14rem;
    border-bottom-right-radius: 0.14rem;
    margin-left: 0.16rem;
}
.lecturer{
    width: 2.4rem;
    height: 0.32rem;
    margin-left: 0.16rem;
    text-align: left;
    line-height: 0.32rem;
    font-size: 0.1rem;
    color:#626365 ;
    letter-spacing: 3px;
}
.pirse{
    width: 2.4rem;
    height: 0.2rem;
    /* letter-spacing: 2px; */
     margin-left: 0.16rem;
     line-height: 0.2rem;
     color: #7d7c7c;
     font-size: 12px;
}
.pirse span:nth-child(1){
    color: #254fd0;
    font-size: 0.1rem;
}
.pirse span:nth-child(2){
    color: #7d7c7c;
    font-size: 0.10rem;
    position: relative;
    left: 1.1rem;
}
.pirse span:nth-child(3){
    color: #7d7c7c;
    font-size: 0.10rem;
    position: relative;
    left: 1.1rem;
}
.pirse span:last-child{
    display: inline-block;
    width: 0.36rem;
    height: 0.20rem;
    color: #7d7c7c;
    font-size: 0.10rem;
    color: #2b72de;
    background-color: #e5f2fa;
    border-radius: 0.2rem;
    text-align: center;
    position: relative;
    left:1.13rem;
}

</style>